<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '2', '3', '4', '5', '6', '7']">
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>菜品管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="MenuInfo">菜品管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><ShoppingTrolley /></el-icon>商家信息
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="ShopInfo">商家信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><CollectionTag /></el-icon>订单管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="OrderInfo">订单信息</el-menu-item>
              <!-- <el-menu-item index="4-1" @click="DiscountInfo">折扣信息</el-menu-item> -->
              <!-- <el-menu-item index="4-3" @click="DisSend">发放折扣</el-menu-item> -->
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><BellFilled /></el-icon>入驻商家
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1" @click="FindInfo">商家审核</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 14px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
            <el-icon><Setting /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="Logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <span>
            <el-popover
              :width="400"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                {{ userInfo.account != "" ? userInfo.account : userInfo.username }}
              </template>
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>商家信息</span>
                  </div>
                </template>
                <div class="_card">
                  <div class="_card_left">商家店名</div>
                  {{ userInfo.account }}
                </div>
                <div class="_card">
                  <div class="_card_left">商家地址</div>
                  {{ userInfo.username }}
                </div>
                <div class="_card">
                  <div class="_card_left">店主</div>
                  {{ userInfo.address }}
                </div>
                <div class="_card">
                  <div class="_card_left">商家介绍</div>
                  {{ userInfo.demo }}
                </div>
                <div class="_card">
                  <div class="_card_left">注册时间</div>
                  {{ userInfo.inputTime }}
                </div>
                <template #footer>店家状态</template>
              </el-card>
            </el-popover>
          </span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar class="router_view">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import axios, { AxiosHeaders } from "axios";
import { ref, onMounted, reactive } from "vue";
import {
  Menu as IconMenu,
  Message,
  Setting,
  User,
  ChatDotRound,
  ShoppingTrolley,
  CollectionTag,
  BellFilled,
  Promotion,
} from "@element-plus/icons-vue";
import router from "@/router";
import { ElMessage } from "element-plus";

const GoIndex = () => {
  router.push("/");
};

const userInfo = reactive({
  account: "",
  address: "",
  balance: 0,
  bornDate: new Date(),
  demo: "",
  email: "",
  img: "",
  inputTime: new Date(),
  qqNum: "",
  sex: "未知",
  updateTime: new Date(),
  username: "",
  wxNum: "",
});

const token = ref(localStorage.getItem("shop_auth_token"));

function getUserInfo() {
  axios
    .get("/api/auth/shop/check", {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log(res);
      if (res.data.success) {
        localStorage.setItem("shop_auth_token", res.data.message);
      } else {
        ElMessage({
          message: res.data.message,
          type: "error",
        });
        setTimeout(() => {
          router.push("/auth/login");
        }, 300);
      }
    })
    .catch((err) => {
      // console.log(err);
      ElMessage({
        message: "network error",
        type: "error",
      });
      setTimeout(() => {
        router.push("/auth/login");
      }, 300);
    });
}

const getAdminInfo = () => {
  axios
    .get("/api/auth/userinfo", {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log("res :", res);
      if (res.data.success) {
        const msg = res.data.message;
        if (msg.account) userInfo.account = msg.account;
        if (msg.address) userInfo.address = msg.address;
        userInfo.balance = msg.balance;
        if (msg.bornDate) userInfo.bornDate = msg.bornDate;
        if (msg.demo) userInfo.demo = msg.demo;
        if (msg.email) userInfo.email = msg.email;
        if (msg.img) userInfo.img = msg.img;
        userInfo.inputTime = msg.inputTime;
        if (msg.qqNum) userInfo.qqNum = msg.qqNum;
        if (msg.sex) userInfo.sex = msg.sex;
        if (msg.updateTime) userInfo.updateTime = msg.updateTime;
        if (msg.username) userInfo.username = msg.username;
        if (msg.wxNum) userInfo.wxNum = msg.wxNum;
      }
    })
    .catch((err) => {
      console.log("err :", err);
    });
};

const Logout = () => {
  localStorage.removeItem("shop_auth_token");
  ElMessage({
    message: "退出登录成功",
    type: "success",
  });
  setTimeout(() => {
    router.push("/");
  }, 800);
};
const FindInfo = () => {
  router.push("/manager/apply");
};
const logInfo = () => {
  router.push("/manager/log");
};

const ShopInfo = () => {
  router.push("/manager/shop");
};
const GoodsInfo = () => {
  router.push("/manager/goods");
};
const feedbackInfo = () => {
  router.push("/manager/feedback");
};
const MenuInfo = () => {
  router.push("/manager/menu");
};
const OrderInfo = () => {
  router.push("/manager/order");
};
const UserInfo = () => {
  router.push("/manager/user");
};
const DiscountInfo = () => {
  router.push("/manager/discount");
};

const DisSend = () => {
  router.push("/manager/sendDiscount");
};
getUserInfo();
getAdminInfo();
</script>

<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
._card {
  display: flex;
  align-items: center;
  ._card_left {
    width: 100px;
    margin-right: 15px;
  }
}
.log {
  display: flex;
  align-items: center;
  .log_img {
    height: 55px;
    border-radius: 5px;
    margin-left: 20px;
  }
}
</style>
